<template>
    <div>
      <el-scrollbar style="height: 600px;">
        <h1 class="h-title">基本信息</h1>
        <el-form :label-position="'left'" label-width="120px" v-if="goodsDetail" >
          <el-form-item label="UPC码" >
            <div>{{goodsDetail.upc}}</div>
          </el-form-item>
          <el-form-item label="商品图片" >
            <div>
              <el-image
                v-for="(item,index) in goodsDetail.thumb_url"
                :key="index"
                style="width: 80px; height: 80px"
                :fit="'contain'"
                :src="item.img_Url"
                :preview-src-list="[item.img_Url]">
              </el-image>
              <!--<img v-for="(item,index) in goodsDetail.thumb_url" :key="index" :src="item.img_Url" @click="showImgDialog(item.img_Url)" alt="" style="width:60px;height:60px;object-fit:cover;margin-right: 15px">-->
            </div>
          </el-form-item>
          <el-form-item label="商品名称" >
            <div>{{goodsDetail.name}}</div>
          </el-form-item>
          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="商品分类" >
              <div>{{goodsDetail.classify_name}}</div>
            </el-form-item>
            <el-form-item class="spec-col-left" label="商品类型" >
              <div>{{goodsDetail.goods_type_name}}</div>
            </el-form-item>
            <el-form-item label="商品ID" >
              <div>{{goodsDetail.id}}</div>
            </el-form-item>
          </el-col>
          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="门店" >
              <div>{{goodsDetail.merchant_name}}</div>
            </el-form-item>
            <el-form-item label="促销规则" >
              <div>无</div>
            </el-form-item>
          </el-col>
          <h1 class="h-title">参数</h1>
          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="生产厂商" >
              <div>{{goodsDetail.manufacturer}}</div>
            </el-form-item>
            <el-form-item label="批准文号" >
              <div>{{goodsDetail.approval_number}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="规格" >
              <div>{{goodsDetail.specification}}</div>
            </el-form-item>
            <el-form-item label="电子监管码" >
              <div>{{goodsDetail.electronic_regulatory_code}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="用法用量" >
              <div>{{goodsDetail.usage_and_dosage}}</div>
            </el-form-item>
            <el-form-item label="适应症" >
              <div>{{goodsDetail.indications}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="适应人群" >
              <div>{{goodsDetail.adapt_to_the_crowd}}</div>
            </el-form-item>
            <el-form-item label="成分" >
              <div>{{goodsDetail.component}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="不良反应" >
              <div>{{goodsDetail.adverse_reactions}}</div>
            </el-form-item>
            <el-form-item label="禁忌" >
              <div>{{goodsDetail.contraindications}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="注意事项" >
              <div>{{goodsDetail.precautions}}</div>
            </el-form-item>
            <el-form-item label="药物相互作用" >
              <div>{{goodsDetail.interaction}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="儿童用药" >
              <div>{{goodsDetail.medication_for_children}}</div>
            </el-form-item>
            <el-form-item label="妊娠与哺乳用药" >
              <div>{{goodsDetail.medication_for_pregnancy_x_lactation}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="老年人用药" >
              <div>{{goodsDetail.medication_for_aged}}</div>
            </el-form-item>
            <el-form-item label="性状" >
              <div>{{goodsDetail.properties}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="包装" >
              <div>{{goodsDetail.packing}}</div>
            </el-form-item>
            <el-form-item label="剂型" >
              <div>{{goodsDetail.dosage_form}}</div>
            </el-form-item>
          </el-col>

          <el-col class="user-detail-pets-col">
            <el-form-item class="spec-col-left" label="贮藏" >
              <div>{{goodsDetail.storage}}</div>
            </el-form-item>
            <el-form-item label="药理作用" >
              <div>{{goodsDetail.pharmacological_action}}</div>
            </el-form-item>
          </el-col>

          <el-form-item class="spec-col-left" label="有效期" >
            <div>{{goodsDetail.expiry_date}}</div>
          </el-form-item>

          <h1 class="h-title">商品详情</h1>
          <div v-html="goodsDetail.detail"></div>

        </el-form>
      </el-scrollbar>
    </div>
</template>

<script>
    export default {
      name: "goods-detail-dialog",
      props: {
        goodsDetail: ''
      },
      data() {
        return {
          activeNames: ['1']
        }
      },
      methods: {

      }
    }
</script>

<style scoped>

</style>
